<template>
  <div class="wrapper"
    ref="wrap">
    <el-form :rules="rules"
      :model="memberInfo"
      ref="baseForm">
      <table>
        <tr>
          <td>会员卡主页背景
            <span class="require">*</span>
          </td>
          <td style="padding:10px">
            <div class='clearfix'>
              <el-form-item prop="img">
                <el-upload class="avatar-uploader"
                  style="float:left"
                  :show-file-list="false"
                  :http-request="sendChange"
                  action="https://jsonplaceholder.typicode.com/posts/">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="img-wrap">
                  <img :src="memberInfo.img"
                    v-if="memberInfo.img"
                    alt="背景图片">
                </div>
                <p style="text-align:left;font-size:12px">仅支持JPG, JPEG, BMP, PNG格式, 文件小于1M(建议使用缕空白色图像, 最佳尺寸500*300像素)</p>
              </el-form-item>
            </div>

          </td>
        </tr>
        <tr>
          <td>会员卡号
            <span class="require">*</span>
          </td>
          <td>
            <span>系统自动生成12位数字卡号</span>
          </td>
        </tr>
        <tr>
          <td>会员有效期</td>
          <td>
            <span>永久有效</span>
          </td>
        </tr>
        <tr>
          <td>特权介绍
            <span class="require">*</span>
          </td>
          <td style="padding:10px">
            <el-form-item prop="content">
              <el-input type="textarea"
                v-model="memberInfo.content"
                :autosize="{ minRows: 8}"
                maxlength="300"
                placeholder="请输入特权介绍"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>使用须知
            <span class="require">*</span>
          </td>
          <td style="padding:10px ">
            <el-form-item prop="useContent">
              <el-input type="textarea"
                v-model="memberInfo.useContent"
                :autosize="{ minRows: 8}"
                  maxlength="300"
                placeholder="请输入使用须知"></el-input>
            </el-form-item>

          </td>
        </tr>
        <tr>
          <td>客户电话
            <span class="require">*</span>
          </td>
          <td style="padding:10px">
            <el-form-item prop="phone">
              <el-input placeholder="请输入客服电话"
                v-model="memberInfo.phone"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>
    <InfomationBtns v-has="'memberconfigredact'">
      <el-button size="small"  type="primary"
        @click="sure('baseForm')">保存</el-button>
      <el-button size="small"
        @click="next('baseForm')"
        type="primary">下一步</el-button>
    </InfomationBtns>
  </div>
</template>

<script>
import { upimg } from "@/public/js/setting";
import { getMemberCardInfo, setMemberCard } from "@/public/js/member.js";
import InfomationBtns from "@/components/common/InfomationBtns";
export default {
  components: {InfomationBtns},
  props: ["toggleFn"],
  data() {
    //检测电话号码（固定电话和手机号码）
    var checkTel = (rule, value, callback) => {
      const regTel = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/;
      if (!value) {
        return callback(new Error("请您输入客服电话"));
      } else if (!regTel.test(value)) {
        callback(new Error("请您输入正确的电话格式"));
      } else {
        callback();
      }
    };
    return {
      memberInfo: {
        img: "",
        useContent: "",
        content: "",
        phone: ""
      },
      img: "",
      rules: {
        img: [
          { required: true, message: "请选择会员卡主页背景", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入特权介绍", trigger: "blur" }
        ],
        useContent: [
          { required: true, message: "请输入使用须知 ", trigger: "blur" }
        ],
        phone: [{ validator: checkTel, trigger: "blur" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取会员卡信息
    _getMemberCardInfo() {
      getMemberCardInfo().then(res => {
        this.memberInfo = res.data.memberInfo || {
          id: "",
          img: "",
          useContent: "",
          content: "",
          phone: ""
        };
      });
    },
    //上传图片
    sendChange(e) {
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      reader.onload = e => {
        let photoPath = e.target.result;
        upimg({
          nowPath: photoPath,
          oldPath: this.memberInfo.img
        }).then(res => {
          console.log(res);
          this.memberInfo.img = res.data.path;
        });
      };
    },
    //保存数据
    _setMemberCard(type) {
      let { id, img, content, useContent, phone } = this.memberInfo;
      console.log(useContent)
      setMemberCard({
        id,
        img,
        content,
        useContent,
        phone
      }).then(res => {
        if (!res.data.errCode) {
          if (type) {
            this.toggleFn();
          } else {
            this.$message({
              type: "success",
              message: "操作成功"
            });
          }
        }
      });
    },
    // 保存
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this._setMemberCard();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //下一步
    next(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this._setMemberCard("next");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this._getMemberCardInfo();
    // console.log(this.toggleFn())
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + 55 + "px";
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 40px;
  table {
    border-collapse: collapse;
    text-align: left;
    width: 1000px;
  }
  tr {
    padding-left: 20px;
    .require {
      color: red;
      font-size: 16px;
      display: inline-block;
      line-height: 16px;
    }
  }
  tr.style {
    background: #f2f2f2;
  }
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    width: auto;
    padding: 0 11px;
    font-size: 12px;
    height: 60px;

    &.style {
      background: #f2f2f2;
    }
  }
  .el-textarea,
  .el-input {
    width: 80%;
  }
  .img-wrap {
    display: inline-block;
    float: left;
    margin: 0 30px;
    img {
      width: 300px;
      height: 100px;
      overflow: hidden;
    }
  }
}
</style>